<template>
	<view class="class-detail d-flex flex-column">
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="#2f75fa"></QSNavbar>
		<view class="top flex-between">
			<view class="d-flex justify-space-between align-start flex-column">
				<!-- <u-tag :text="`${goods_spec}`" bgColor="#fff" color="#ffa400" borderColor="rgba(0,0,0,0)" shape="circle"></u-tag> -->
				<view class="text flex-align" style="margin-top: 30rpx">
					<view class="it flex-align">
						<!-- <u-icon name="clock" color="#fff"></u-icon> -->
						<view class="">
							{{student_name}}
						</view>
					</view>
					<!-- <view class="it flex-align">
						<u-icon name="map-fill" color="#fff"></u-icon>
						大连校区
					</view> -->
				</view>
				<!-- train_enum_id == 1  短训培训班-->
				<!-- train_enum_id == 2 长训-->
				<!-- train_enum_id == 3 小班 约课-->
				<view class="text flex-align" style="margin-top: 30rpx">
					<view class="it flex-align">
						<!-- <u-icon name="clock" color="#fff"></u-icon> -->
						<view class="">
							
							<text v-if="train_enum_id ==1" style="color: #2f75fa;background-color: #fff;font-size: 24rpx;padding:0rpx 10rpx 0rpx 10rpx">短训</text>
							<text v-if="train_enum_id ==2" style="color: #26cd78;background-color: #fff;font-size: 24rpx;padding:0rpx 10rpx 0rpx 10rpx">长训</text>
							<text v-if="train_enum_id ==3" style="color: #FC39E3;background-color: #fff;font-size: 24rpx;padding:0rpx 10rpx 0rpx 10rpx">小班</text>
								{{area_name}}
						</view>
					</view>
				</view>
			</view>

			<cCircle :size="75" :percent="percent" animation circleColor="#ffa400" :circleWidth="8" :direction="180"
				defaultColor="#ddd">
				<view slot="content" class="flex-center"
					style=" height: 100%;width: 100%;border-radius: 50%;background-color: #fff;color: #ffa400;">
					{{num}}/{{hour_num}}课
				</view>
			</cCircle>
		</view>

		<u-sticky>
			<u-tabs :list="tabsList" lineColor="#4786fe" :activeStyle="{
          color: '#2f75fa',
        }" :inactiveStyle="{
          color: '#353535',
        }" :lineWidth="30" :current="currentTab" @click="onClickTab" />
		</u-sticky>

		<!-- 课时 -->
		<schedule v-show="currentTab === 0" :list="list" :train_enum_id='train_enum_id' :class_mode_id='class_mode_id' :train_item_id='train_item_id' :goods_id='goods_id' :student_id='student_id' :class_id='class_id'/>

		<!-- 服务 -->
		<service v-show="currentTab === 1" :mobile='mobile'/>

		<!-- 记录 -->
		<!-- <record v-show="currentTab === 2" class="d-flex flex-grow-1" :recordlist='recordlist'/> -->
		<record v-show="currentTab === 2" :recordlist="recordlist" :train_enum_id='train_enum_id' :class_mode_id='class_mode_id' :train_item_id='train_item_id' :goods_id='goods_id' :student_id='student_id' :class_id='class_id'/>
	</view>
</template>

<script>
	import schedule from "./schedule";
	import service from "./service";
	import record from "./record";
	const index = require("@/api/personal/index.js");
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	export default {
		components: {
			schedule,
			service,
			record,
			QSNavbar,
		},
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "课时详情",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				num: '',
				hour_num: '',
				percent: '',
				currentTab: 0,
				tabsList: [{
					name: "课时"
				}, {
					name: "服务"
				}, {
					name: "记录"
				}],
				list: [],
				id:'',
				student_id:'',
				goods_spec:'',
				train_enum_id:'',
				class_mode_id:"",
				train_item_id:'',
				class_id:'',
				student_name:'',
				area_name:'',
				goods_id:"",
				listQuery: { //分页
					pageSize: 10,
					page: 1,
				},
				mobile:'',
				recordlist:[],
				totalPage:''
			};
		},
		// onLoad({
		// 	title,
		// 	id
		// }) {
		// 	console.log(id);
		// 	uni.setNavigationBarTitle({
		// 		title,
		// 	});

		// 	this.class_times()
		// 	this.ysl()
		// },
		onLoad(options){
			this.student_id = options.student_id
			this.id = options.id
		},
		onShow() {
			this.class_times()
			this.records()
		},
		methods: {
			// 课包-服务-手机号
			async mob() {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					id:this.id,
				}
				let res = await index.mob(postData)
				if (res.code === 1) {
					console.log(res,'2222')
					this.mobile = res.data.mobile
				}
			},
			// // 课包-记录
			async records() {
				let that = this;
				if (this.listQuery.page === 1) that.recordlist = [];
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id:uni.getStorageSync('openid'),
					page:this.listQuery.page,
					pageSize:this.listQuery.pageSize,
					id:this.id
				}
				let res = await index.records(postData)
				if (res.code === 1) {
					// this.recordlist = res.data.list.data
					that.recordlist = that.recordlist.concat(res.data.list.data); //将数据拼接在一起
					that.totalPage = res.data.list.last_page
					console.log(res,'2222')
				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.page) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.page += 1;
				this.records()
			},
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},

			onClickTab({
				index
			}) {
				this.currentTab = index;
				if (this.currentTab == 0) {
					this.class_times()
				} else if(this.currentTab == 1){
					this.mob()
				} else if(this.currentTab == 2){
					// this.records()
					this.class_times()
				}
			},
			// 获取课节
			async class_times() {
				let postData = {
					id:this.id,
					student_id: this.student_id,
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					openid:uni.getStorageSync('openid')
				}
				let res = await index.class_times(postData)
				if (res.code === 1) {
					let num = parseFloat(res.data.info.num)
					let hour_num = parseFloat(res.data.info.hour_num)
					this.num = num
					this.hour_num = hour_num
					this.percent = this.amount((num / hour_num * 100))
					this.goods_spec = res.data.info.name
					this.train_enum_id = res.data.info.train_enum_id
					this.class_mode_id = res.data.info.class_mode_id
					this.train_item_id = res.data.info.train_item_id
					this.class_id = res.data.info.class_id
					this.goods_id = res.data.info.id
					this.area_name = res.data.info.area_name
					this.list = res.data.info.timesList
					this.student_name = res.data.info.student_name
					this.navbarItems_1[1].text = res.data.info.name
				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.class-detail {
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			background-color: #2f75fa;
			padding: 20rpx;
			color: #fff;

			.text {
				font-size: 30rpx;

				.it {
					&+.it {
						margin-left: 30rpx;
					}
				}
			}
		}

		/deep/.u-tabs {
			background-color: #fff;
			border-bottom: 1px solid #e5e5e5;
			border-radius: 30rpx 30rpx 0 0;

			.u-tabs__wrapper__nav__item {
				flex: 1;
			}

			.u-tabs__wrapper__nav__line {
				bottom: 0;
			}
		}
	}
</style>
